<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/shopcar.css" />
		<link rel="stylesheet" type="text/css" href="../css/head.css" />
		<title>购物车</title>
	</head>

	<body ng-app="myApp">
		<div ng-controller="carCtrl">

			<div class="r-top1">
				<div class="r-content">
					<div class="r-left">
						<span>所在城市:</span>
						<span>郑州市</span>
						<span class="r-logol">
						<img src="../img/main/7.png" alt="" />
					</span>
					</div>
					<div class="r-right">
						<a href="###" class="r-span1 r-span11">登录</a>
						<a href="###" class="r-span1 r-span12">注册</a>
						<a href="###" class="r-span1">我的订单</a>
						<a href="###" class="r-span1">我的消息</a>
						<a href="###" class="r-span1">我是商家</a>
						<span class="r-span2">
						<img src="../img/main/5.png" alt="" />
					</span>
					</div>
				</div>
			</div>

			<div class="car-nav-wrap">
				<div class="car-nav clearfix">

					<a href="main.html"><img src="../img/main/1.png" alt="" class="car-nav-logo l" /></a>
					<div class="car-nav-r r">
						<span class="active">我的购物车</span>
						<img src="../img/jifenDetail/rightJT.png" />
						<span>确认订单信息</span>
						<img src="../img/jifenDetail/rightJT.png" />
						<span>订单提交成功</span>
					</div>
				</div>
			</div>
			<!--购物车详情-->
			<div class="car-con">
				<p class="car-con-title">
					<img src="../img/gouwuche/biggouwuche.png" alt="" class="car-con-che" />
					<span>购物车</span>
				</p>
				<table border="0" cellspacing="0" cellpadding="0" class="car-table v-gwcar" ng-repeat="x in cardata22">
					<tr class="v-gwcart">
						<th class="checkBox">
							<!--<img src="../img/login/checkbox1.png" alt="" class="car-checkbox" style="top:15px ;" />-->
							<span class="car-checkbox" style="top:15px ;"></span>
							<span style="margin-left: 60px;">{{x.name}}</span>
						</th>
						<th>规格</th>
						<th>单价</th>
						<th>数量</th>
						<th>金额</th>
						<th>操作</th>
					</tr>
					<tr ng-repeat="a in x.data | limitTo:4" class="car-row v-gwcarc">
						<th class="checkBox1 checkBox">
							<span class="car-checkbox car-checkbox1" ng-click="vxuanze(a.id)"></span>
							<!--<img src="../img/login/checkbox1.png" alt="" />
							<img src="../img/login/checkbox2.png" alt="" ng-show="checkShow==true" class="car-checkbox2 car-checkbox" />-->
							<img ng-src="{{a.src}}" alt="" class="car-goods-img" />
							<span>{{a.name}}</span>
						</th>
						<th>
							{{a.guige}}
						</th>
						<th>
							¥<span>{{a.newprice}}</span>
						</th>
						<th class="car-choose">
							<button class="car-reduce " ng-click="reduce(a.id,$event)">-</button>
							<input type="text" class="car-input" value="a.num" ng-model="a.num" />
							<button class="car-add " ng-click="add(a.id)">+</button>
						</th>
						<th class="car-price">
							¥<span>{{a.num * a.newprice}}</span>
						</th>
						<th>
							<button class="car-del" ng-click="del($event)">删除</button>
						</th>
					</tr>
					<tr class="car-totalprice">
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th></th>
						<th class="car-totalprice-th v-gwcarf">商品总额 &nbsp;&nbsp;<span class="rmb">¥</span><span class="total-num">{{totalPrice()}}</span></th>
					</tr>
				</table>

				<!--批量操作-->
				<div class="batch-oper clearfix">
					<p class="l allall">
						<span ng-click="vquanxuan()">全选</span>
						<span ng-click="vpiliangsc()">批量删除</span>
					</p>
					<p class="r">
						<span class="spzj">商品总计: &nbsp;&nbsp;</span>
						<span class="zje">¥2977</span>
						<a href="affirm2.html"><span class="nowbuy" ng-click="vljgm()">立即购买</span></a>
					</p>
				</div>
			</div>
		</div>
		<div ng-include="'foot.html'"></div>
	</body>
	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/angular.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../js/shopcar.js" type="text/javascript" charset="utf-8"></script>-->
	<script type="text/javascript">
		var app = angular.module('myApp', []);
		app.controller('carCtrl', function($scope, $http, $timeout) {

			$http.get('../php/main.php').success(function(data) {
				$scope.aaa = data;
				console.log($scope.aaa);
				//				$scope.carGoods = data;

				$scope.carGoods = [];
				for(var i = 0; i < data.length; i++) {
					//			console.log(data[i].kind);
					if($.inArray(data[i].storename, $scope.carGoods) == -1) {
						$scope.carGoods.push(data[i].storename);
					}
				}
				console.log($scope.carGoods);

				$scope.cargoods1 = [];
				for(var i = 0; i < $scope.carGoods.length; i++) {
					$http.get('../php/shopcar1.php?storeName=' + $scope.carGoods[i]).success(function(data) {
						//拿到的是一个以kind种类区分的数组
						$scope.cargoods1.push(data);
					})
				}

				console.log($scope.cargoods1);

				$timeout(function() {
					var vobj = [];
					//	//传到前台
					$scope.varrf = $scope.carGoods;

					for(var i = 0; i < 3; i++) {
						console.log($scope.carGoods[i]);
						vobj[i] = {};
						vobj[i].name = $scope.carGoods[i];
						vobj[i].data = [];
						for(j in $scope.aaa) {
							//							for(m in $scope.cargoods1[j]) {
							//								console.log($scope.cargoods1[j][0].storename);
							if($scope.aaa[j].storename == $scope.carGoods[i]) {
								vobj[i].data.push($scope.aaa[j]);
							}
							//							}
						}
					}
					$scope.cardata22 = vobj;
					console.log($scope.cardata22);
				}, 200)

				$timeout(function() {
				//切换CheckBox
					$scope.checkShow = true;
					console.log($('.car-checkbox'));
					$('.car-checkbox1').each(function(i, e) {
						$(e).click(function() {

							if($scope.checkShow == true) {
								$(this).addClass('active');
							} else {
								$(this).removeClass('active');
							}
								$scope.checkShow = !$scope.checkShow;
						})
					})
					
				//全选某个商家的产品
					$scope.allShow = true;
				$('.car-checkbox').each(function(i,e){
					$(e).click(function(){
						if($scope.allShow==true){
							$(this).addClass('active');
							$(this).parents('.v-gwcart').siblings().find($('.car-checkbox1')).addClass('active');
						}else{
							$(this).removeClass('active');
							$(this).parents('.v-gwcart').siblings().find($('.car-checkbox1')).removeClass('active');
						}
						$scope.allShow =!$scope.allShow;
					})
				})
				
				//全选购物车所有的商品
				$scope.allCar = true; 
				$scope.vquanxuan = function(){
					if($scope.allCar==true){
						$('.car-checkbox').addClass('active');
						$('.car-checkbox1').addClass('active');
						
						$scope.vpiliangsc = function(){
							$('.car-table').remove();
							console.log($(this));
							$('.batch-oper').remove();
						}
						
					}else{
						$('.car-checkbox').removeClass('active');
						$('.car-checkbox1').removeClass('active');
					}
					$scope.allCar=!$scope.allCar;
				}
				
				}, 500);
			})

			//			$scope.checkbBtn = function(i){
			//				$scope.checkShow =!$scope.checkShow ;
			//			}

			$(".checkBox1").click(function() {
				console.log($(this));
			})
			//增加商品			
			$scope.add = function(id) {
				
				$scope.aaa[id].num++;
			}

			//减少
			$scope.reduce = function(id, ev) {
				if($scope.aaa[id].num > 1) {
					$scope.aaa[id].num--;
				}
				if($scope.aaa[id].num <= 1) {
					if(confirm('你确定要删除此商品吗?')) {
						$(ev.target).parents('.car-row').remove();
					}
				}
			}

			//商品总额
			$scope.totalPrice = function() {
				var allPrice = 0;
				for(var i = 0; i < $scope.aaa.length; i++) {
					allPrice += $scope.aaa[i].num * $scope.aaa[i].newprice;
				}
				return allPrice;
			}
			//删除一条数据
			$scope.del = function(id, ev) {
				if(confirm('确定要删除此商品吗?')) {
					$(ev.target).parents('.car-row').remove();
				}
			}

			$('.r-span11').html('你好,' + localStorage.tel);
			$('.r-span12').html('退出');

		})
	</script>

</html>